<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="Cesium/Cesium.js"></script>
  <style>
      @import url(Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <div style="position:absolute;top: 0;display:none;">
	<canvas id="fade_canv"></canvas>
  </div>
<script src="../dist/wind-gl.js"></script>
  <script>
	var viewer = new Cesium.Viewer('cesiumContainer');
	
	var worldRectangle = viewer.scene.primitives.add(new Cesium.Primitive({
        geometryInstances : new Cesium.GeometryInstance({
            geometry : new Cesium.RectangleGeometry({
                rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
                vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
            })
        }),
        appearance : new Cesium.EllipsoidSurfaceAppearance({
            aboveGround : false
        }),
        show : true
    }));
	// An extremely simple demo of the flowing points visualization.
	// public domain method demo by Terry Brown, terrynbrown@gmail.com

	// get canvas element and size
	var canv = document.getElementById('fade_canv');
	var width = parseFloat(canv.width);
	var height = parseFloat(canv.height);

	var faders_n = 250;   // faders to show
	var faders = [];      // list of active faders
	var fader_age = 200;  // max. age of a fader

	function new_fader() {
		// return a new fader
		return {
			// position across canvas, 0-1
			pos: Math.random(),
			// vertical offset
			offs: (0.5-Math.random())*height*0.2,
			age: 0,
			speed: 0.5
		};
	}

	// create initial faders
	for (var i=0; i<faders_n; i++) {
		faders.push(new_fader());
		// randomize ages so they're not synchronized
		faders[faders.length-1].age = Math.random()*fader_age;
	}

	var ctx = canv.getContext('2d');

	function fade() {
		for (var f=0; f<faders_n; f++) {
			var fader = faders[f];
			var x = fader.pos * width;
			// convert canvas position to angle in range pi to 3*pi
			var a = fader.pos*2*Math.PI + Math.PI;
			var y = fader.offs + Math.sin(a) * height*0.3 + height/2;
			// red brightness relative to speed
			var c = parseInt(256*fader.speed*1.2);
			// opacity also relative to speed
			var o = fader.speed
			// draw a colored dot
			ctx.fillStyle = "rgba("+c+",255,255,"+o+")"
			ctx.fillRect(x, y, 1, 1);
			// move the fader along, wrap if needed
			fader.pos += fader.speed / width;
			if (fader.pos > 1) {
				fader.pos -= 1;
			}
			// accelerate by cosine
			fader.speed += 0.002 * Math.cos(a);
			// replace fader if aged out
			fader.age += 1;
			if (fader.age > fader_age) {
				faders[f] = new_fader();
			}
		}
		
		// decrease opacity across the image
		var imageData = ctx.getImageData(0, 0, width, height);
		data = imageData.data;
		for(var i = 0; i < data.length; i += 4) {
			// data[i], [i+1], [i+2], [i+3], are R, G, B, and alpha
			// either
			data[i + 3] = Math.max(0, data[i + 3]-1);
			// or (this never fades to clear)
			// data[i + 3] *= 0.97;
		}
		ctx.putImageData(imageData, 0, 0);
		
		updateRect(worldRectangle,canv);
		// use timeout to loop, otherwise display doesn't update
		setTimeout(fade, 0);
	}

	applyDiffuseMaterial(worldRectangle,canv);
	fade();

	function applyDiffuseMaterial(primitive,canvas) {
		/*primitive.appearance.material =  new Cesium.ImageMaterialProperty({
			image:new Cesium.CallbackProperty(function() {
				return canvas;
			}, false),
			transparent:true
		});*/
		primitive.appearance.material = new Cesium.Material({
			fabric : {
				type : 'Image',
				uniforms : {
					image : canv
				}
			}
		});
	}

	function updateRect(primitive,canvas){
		var img = convertCanvasToImage(canvas);
		primitive.appearance.material.uniforms.image=img.src;//img.src;
	}

	function convertCanvasToImage(canvas) {
		var image = new Image();
		image.src = canvas.toDataURL("image/png");
		return image;
  }
  </script>
</body>
</html>
